<template>
  <el-select v-model="cur_value" placeholder="请选择小组" clearable>
    <el-option
      v-for="item in groupAry"
      :key="'group' + item.key"
      :label="item.name"
      :value="item.key"
    />
  </el-select>
</template>

<script>
import { getDepartment } from "@/api/org_team_members";
import g from "@/utils/utilFn";
export default {
  name: "departmentSelect",
  props: {
    value: String,
    department:String,
  },
  data() {
    return {
      groupAry: [],
      department_groupAry:[]
    };
  },
  computed: {
    cur_value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      },
    }
  },
  created() {
    this.initGroup().then(this.updateGroup);
    
  },
  watch:{
    department(nv,ov){
        this.updateGroup(nv)
    }
  },
  methods: {
    initGroup() {
      return getDepartment().then((response) => {
        var data = g.Copy(response.data);
        this.department_groupAry =data;
        var groupAry = g.removeRepeatAttr(data, "group");
        g.each(groupAry, function (it) {
          it.key = it.group;
          it.name = it.group;
        });
        this.groupAry = groupAry;
      });
    },
    updateGroup(v) {
      // alert(v)
      var data = g.Copy(this.department_groupAry);
      v = v ||this.department ||"";
      var groupAry = g.removeRepeatAttr(data, "group");
      if (v) {
        var res = g.query(data, function (it) {
          if (it.department == v) {
            return true;
          } //效率最好
        });
        groupAry = g.removeRepeatAttr(res, "group");
      }
      g.each(groupAry, function (it) {
        it.key = it.group;
        it.name = it.group;
      });
      this.groupAry = groupAry;   
    },
  },
};
</script>

